<template>
  <div class="add-user">
    <banner title="用户添加">
      <el-button class="btn-gradient" type="primary" icon="el-icon-refresh">刷新</el-button>
    </banner>
    <div class="no">
      <div class="box">
        <el-form
          ref="form"
          :model="form"
          :rules="suForm"
          label-width="80px"
        >
          <!-- 用户id -->
          <el-form-item
            prop="user_code"
            label="用户ID："
            placeholder="请输入用户ID"
          >
            <el-input v-model.trim="form.user_code" />
          </el-form-item>
          <!-- 用户账号 -->
          <el-form-item
            prop="user_count"
            label="用户账号："
            placeholder="请输入用户账号"
          >
            <el-input v-model="form.user_count" />
          </el-form-item>
          <el-form-item
            prop="user_name"
            label="用户名称："
            placeholder="请输入用户名称"
          >
            <el-input v-model="form.user_name" />
          </el-form-item>
          <!-- 电话号码 -->
          <el-form-item
            prop="tel"
            label="电话号码："
          >
            <el-input
              v-model.trim="form.tel"
              placeholder="请输入电话号码"
            />
          </el-form-item>
          <!-- 手机号码 -->
          <el-form-item
            label="手机号码："
          >
            <el-input
              v-model.trim="form.phone"
              placeholder="请输入手机号码"
            />
          </el-form-item>
          <!-- 会员等级 -->
          <el-form-item
            prop="level_name"
            :required="true"
            label="会员等级："
          >
            <el-input
              v-model.trim="form.level_name"
              placeholder="请输入会员等级"
            />
          </el-form-item>
          <!-- 单选框 -->
          <el-form-item
            prop="sex"
            :required="true"
            label="性别"
          >
            <el-radio-group v-model.trim="form.sex">
              <el-radio label="保密" />
              <el-radio label="男" />
              <el-radio label="女" />
            </el-radio-group>
          </el-form-item>
          <!-- 生日 -->
          <div class="live">
            <el-form-item
              prop="birthday"
              :required="true"
              label="生日："
            >
              <el-col :span="6">
                <el-date-picker
                  v-model.trim="form.birthday"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                />
              </el-col>
              <el-col
                class="line"
                :span="2"
              >-</el-col>
              <el-col :span="11" />
            </el-form-item>
          </div>
          <!-- 城市 -->
          <el-form-item
            :required="true"
            prop="settlement"
            label="城市："
          >
            <!-- <v-distpicker :placeholders="placeholders"></v-distpicker>
           -->
            <div class="input">
              <el-input
                v-model.trim="form.settlement"
                placeholder="请输入省"
              />
              <el-input
                v-model.trim="form.domicile"
                placeholder="请输入市"
                wdith="212px"
              />
            </div>
          </el-form-item>
          <!-- 职业 -->
          <el-form-item
            prop="trade_name"
            :required="true"
            label="职业："
          >
            <el-input
              v-model.trim="form.trade_name"
              placeholder="请输入职业"
            />
          </el-form-item>
          <!-- 需求 -->
          <el-form-item
            prop="demand"
            :required="true"
            label="需求："
          >
            <el-input
              v-model.trim="form.demand"
              placeholder="请输入需求"
            />
          </el-form-item>
          <!-- 资源/产品 -->
          <el-form-item
            prop="product"
            :required="true"
            label="资源/产品："
          >
            <el-input
              v-model.trim="form.product"
              placeholder="请输入资源/产品"
            />
          </el-form-item>
          <!-- 服务 -->
          <el-form-item
            prop="serve"
            :required="true"
            label="服务："
          >
            <el-input
              v-model.trim="form.serve"
              placeholder="请输入服务"
            />
          </el-form-item>
          <!-- 新密码 -->
          <el-form-item
            prop="passa"
            :required="true"
            label="新密码："
          >
            <el-input
              v-model.trim="form.passa"
              placeholder="请输入新密码"
            />
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item
            prop="passb"
            :required="true"
            label="确认密码："
          >
            <el-input
              v-model.trim="form.passb"
              placeholder="请输入确认密码"
            />
          </el-form-item>
          <!-- 账户启动状态 -->
          <el-form-item
            prop="delivery"
            :required="false"
            label="账户启动状态："
          >
            <el-switch v-model.trim="form.delivery" />
          </el-form-item>
          <el-button
            type="primary"
            :plain="true"
            @click="pushBtn('form')"
          >提交</el-button>
        </el-form>
      </div>
      <div class="heg" />
    </div>
  </div>
</template>
validate
<script>
import VDistpicker from 'v-distpicker'
import { addUserList } from '@/api/usermanage'
import { formatDateAndTime } from '@/utils/util.js'
export default {
  components: { VDistpicker },
  data() {
    return {
      form: {
        user_code: '',
        tel: '',
        phone: '',
        level_name: '',
        sex: '',
        user_count: '',
        birthday: '',
        birth_area: '',
        product: '',
        user_name: '',
        trade_name: '',
        demand: '',
        serve: '',
        passa: '',
        passb: '',
        delivery: true
      },
      // 正则效验
      suForm: {
        user_code: [
          { required: true, message: '请输入用户ID', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z]{4,20}$/.test(value) == false) {
                callback(new Error('用户ID由4-20位字母组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        birth_area: [
          { required: true, message: '请输入城市', trigger: 'blur' }
        ],
        user_count: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z]{4,20}$/.test(value) == false) {
                callback(new Error('用户名由4-20位字母组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        tel: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(value) == false) {
                callback(new Error('请输入电话号码'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(value) == false) {
                callback(new Error('请输入正确的手机号码'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        level_name: [
          { required: true, message: '请输入等级', trigger: 'blur' },
          { min: 1, max: 1, message: '长度在 1个字符', trigger: 'blur' }
          // {
          //   validator: (rule, value, callback) => {
          //     if (/^[\u4e00-\u9fa5]{2,6}$/.test(value) == false) {
          //       callback(new Error("请输入等级2到6个中文"));
          //     } else {
          //       trigger: "blur";
          //       callback();
          //     }
          //   },
          //   trigger: "blur" //这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          // }
        ],
        user_name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{2,6}$/.test(value) == false) {
                callback(new Error('名称为中文2-6个中文'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        trade_name: [
          { required: true, message: '请输入职业', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{2,6}$/.test(value) == false) {
                callback(new Error('职业为中文2-6个中文'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        demand: [
          { required: true, message: '请输入需求', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{2,10}$/.test(value) == false) {
                callback(new Error('职业为中文2-10个中文'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        product: [
          { required: true, message: '请输入资源/产品', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{2,10}$/.test(value) == false) {
                callback(new Error('资源/产品为中文2-10个中文'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        serve: [
          { required: true, message: '请输入服务', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4e00-\u9fa5]{2,10}$/.test(value) == false) {
                callback(new Error('服务为中文2-10个中文'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        passa: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error('用户名由6-20位数字字母组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        // sex: [{ required: true, message: "请输入密码", trigger: "blur" }],
        passb: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[a-zA-Z0-9]{6,20}$/.test(value) == false) {
                callback(new Error('用户名由6-20位数字字母组成'))
              } else if (value !== this.form.passa) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ],
        textValue: [
          { required: true, message: '请输入备注信息', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^[\u4E00-\u9FA5]{6,40}$/.test(value) == false) {
                callback(new Error('用户名由6-40位组成'))
              } else {
                'blur'
                callback()
              }
            },
            trigger: 'blur' // 这里还有blur触发方法； 如果设为none，那么只有this.$refs[formName]['validate']时才会验证
          }
        ]
      }
    }
  },
  created() {},
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    getDateList() {
      getuserDetail().then(res => {})
    },
    // 提交
    pushBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$message.success('添加成功，正在跳转')
          this.$router.push({
            name: 'User-manage'
          })
        } else {
          this.$message.error('错了哦，所有输入框不能为空')
          return false
        }
        if (this.form.delivery) {
          this.form.delivery = '1'
        } else {
          this.form.delivery = '0'
        }
        addUserList({
          birthday: this.form.birthday,
          domicile: this.form.domicile,
          levelCode: this.form.level_name,
          password: this.form.passb,
          phone: this.form.phone,
          settlement: this.form.settlement,
          sex: this.form.sex,
          state: this.form.delivery,
          tel: this.form.tel,
          tradeCode: this.form.trade_name,
          userCode: this.form.user_code,
          userCount: this.form.user_count,
          userName: this.form.user_name,
          demand: this.form.demand,
          product: this.form.product,
          serve: this.form.serve
        }).then(res => {
          console.log(res)
        })
      })
      // if (
      //   this.form.user_code != "" &&
      //   this.form.tel != "" &&
      //   this.form.phone != "" &&
      //   this.form.level_name != "" &&
      //   this.form.sex != "" &&
      //   this.form.user_count != "" &&
      //   this.form.birthday != "" &&
      //   this.form.birth_area != "" &&
      //   this.form.profession != "" &&
      //   this.form.user_name != "" &&
      //   this.form.trade_name != "" &&
      //   this.form.user_source != "" &&
      //   this.form.attention_code != "" &&
      //   this.form.need != "" &&
      //   this.form.serve != "" &&
      //   this.form.passa != "" &&
      //   this.form.passb != "" &&
      //   this.form.delivery != ""
      // ) {
      //   console.log(1111);
      // } else {
      //
      // }
    },
    // 返回
    returnBtn() {
      this.$router.push({
        name: 'User-manage'
      })
    }
  }
}
</script>

<style lang="scss">
.add-user {
  width: 100%;
  padding-left: 29px;
  padding-right: 114px;
}

.heg {
  height: 200px;
  width: 100%;
}
.box {
  margin: 15px 0 0 2px;
  padding: 40px 0 10px 0;
  width: 100%;
  // height: 1500px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .el-form {
    position: relative;
    .el-form-item {
      margin-bottom: 25px !important;
      .el-form-item__content {
        width: 630px !important;
        .el-input__icon {
          line-height: 37px;
        }
        .distpicker-address-wrapper {
          select {
            float: left;
            width: 200px !important;
            margin-right: 10px !important;
            height: 36px !important;
            line-height: 36px !important;
            border-radius: 3px;
            border: 1px solid rgba(153, 153, 153, 1);
          }
        }
      }

      // label
      .el-form-item__label {
        float: left;
        width: 377px !important;
        height: 36px !important;
        font-size: 16px !important;
        font-family: PingFangSC-Regular !important;
        font-weight: 400 !important;
        color: rgba(102, 102, 96, 1) !important;
        line-height: 36px !important;
        letter-spacing: 1px !important;
      }
      // conten
      .el-form-item__content {
        float: left;
        margin: 0 !important;
        height: 36px !important;
        width: 630px !important;
        // *
        .el-input {
          width: 444px !important;
          height: 36px !important;
          float: left !important;
          // input
          .el-input__inner {
            float: left !important;
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            line-height: 36px !important;

            width: 444px !important;
            height: 36px !important;
            border-radius: 3px !important;
            border: 1px solid rgba(153, 153, 153, 1) !important;

            outline: 0;
            padding: 0 20px;
            -webkit-transition: border-color 0.2s
              cubic-bezier(0.645, 0.045, 0.355, 1);
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            width: 200px;
          }
        }
        .input {
          .el-input {
            width: 222px !important;
            height: 36px !important;
            float: left !important;
            // input

            .el-input__inner {
              float: left !important;
              -webkit-appearance: none;
              background-color: #fff;
              background-image: none;
              border-radius: 4px;
              border: 1px solid #dcdfe6;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              color: #606266;
              display: inline-block;
              font-size: inherit;
              line-height: 36px !important;

              width: 222px !important;
              height: 36px !important;
              border-radius: 3px !important;
              border: 1px solid rgba(153, 153, 153, 1) !important;

              outline: 0;
              padding: 0 20px;
              -webkit-transition: border-color 0.2s
                cubic-bezier(0.645, 0.045, 0.355, 1);
              transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
              width: 200px;
            }
          }
        }
        // i
        i {
          float: left;
          display: block;
          width: 10px;
          height: 20px;
        }
      }
    }
    input:nth-child(2) .el-form-item {
      width: 100px !important;
    }
    // 特色部分
    .live {
      .el-form-item {
        .el-form-item__content {
          width: 214px !important;
          .el-date-editor--date {
            width: 214px !important;
            .el-input__inner {
              width: 214px !important;
            }
          }
        }
      }
    }
    // 按钮
    button {
      position: absolute;
      bottom: -130px;
      left: 757px;
      padding: 0 !important;
      width: 100px !important;
      height: 40px !important;
      background: rgba(72, 141, 255, 1) !important;
      border-radius: 2px !important;
      color: #fff;
      span {
        display: block;
        width: 100px !important;
        height: 40px !important;
        line-height: 40px !important;
        text-align: center;
      }
    }
  }
}
</style>

